<template>
  <div class="headers">
      <!-- 开头文字区 -->
    <div class="headers_left">
      <img src="../images/logo.jpg" alt=""  />
      <span>天易云</span>
    </div>
    <!-- 搜索区 -->
    <div class="headers_input">
            <el-autocomplete
            :trigger-on-focus="false"
  v-model="states"
  :fetch-suggestions="querySearchAsync"
   suffix-icon="el-icon-search"
  placeholder="请输入内容"
 @input='jkl'
 style="width:270px"
></el-autocomplete>
    </div>
    <!-- 用户图片区 -->
    <div class="headers_userimg">
        <img :src="userimg"  alt=""  v-show="userimg"/>
          <a v-show="!userimg">登录</a>
    </div>
       
      <i class="iconfont icon-yifu" style="right:300px;top:14px"></i>
      <a href="https://gitee.com/hotqiu/starred"> <i class="iconfont icon-google" style="top:12px" >
            
        </i></a>
       
          <i class="iconfont icon-github"  style="right:60px;top:12px"></i>
  </div>
</template>

<script>
import {loginaccount} from '@/api/index.js'
import { mapState } from 'vuex';
export default {

  data(){
      return{
          states:'',
          timeout:  null,
          userimg:'',
         
      }
  },
  computed:{
      ...mapState({
          searchsg:(state)=>{
              return state.user.searchsg
              
          }
      })
  },
  methods:{
      handleSelect(item){
            console.log(item);
      },
      querySearchAsync(queryString,cb){
        var restaurants = this.searchsg;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1500 * Math.random());
   
             
      },
      createStateFilter(queryString){
              return (states) => {
          return (states.value.toLowerCase().indexOf(queryString.toLowerCase()) == 0);
        };
      },
      jkl(){
                console.log(this.states);
          this.$store.dispatch('searchsg',this.states)
      },
  },
 async mounted(){
        const res =await loginaccount();
        //console.log(res);
         this.userimg=res.profile.avatarUrl
  }
};
</script>

<style lang='less' scoped>
.headers {
  position: relative;
  height: 80px;
  background-color: #f9f9f9;
   .iconfont {
       position: absolute;
       right: 180px;
       top: 17px;
       font-size: 40px;
       color: skyblue;
       cursor: pointer;
   }
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 10px 50px 0px 70px;
    cursor: pointer;
  }
  span {
    position: absolute;
    top: 7px;
    font-size: 45px;
    color: skyblue;
    letter-spacing: 10px;
  }
    .headers_input{
          position: absolute;
          top: 20px;
          left: 400px;
    }
    .headers_userimg{
        position: absolute;
          right: 400px;
          top: 8px;
          
           img{
               background-color: #f9f9f9;
        width: 40px;
          height: 40px;
           }
           a{
               position: absolute;
               cursor: pointer;
               font-size: 16px;
               top: 20px;
               right: 20px;
               width: 60px;
           }
        a:hover{
            text-decoration: underline;
        }
    }
}
</style>